@use "components/progress";
@use "components/recorder";
@use "components/toggler";
@use "components/toast";
@use "components/footer";
@use "components/star-fork";
@use "utils/reset";
@use "utils/color-swatch";
@use "utils/variables" as vars;
@use "utils/breakpoints";
@use "utils/mixins";
@use "utils/keyframes";
@use "utils/fluid-type";

html {
  overflow-x: hidden;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: auto;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  scroll-behavior: smooth;
}

body {
  position: relative;
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: vars.$main-font;
  font-size: 1rem;
  font-weight: 400;
  background-color: vars.$white;
  color: vars.$font-color;
  transition: 0.5s vars.$bezier-curve;

  &[data-theme="dark"] {
    background-color: vars.$darkest-grey;
    color: vars.$white;

    .sh {
      &__toggler {
        background-color: vars.$darkest-grey;
        border-color: vars.$grey;
        &:hover {
          border-color: vars.$white;
        }
      }
      &__github-btn {
        color: vars.$white;
        border-color: vars.$white;
        background-color: vars.$black;
        &::before {
          background-image: url("../images/github-mark-white.svg");
        }
      }
      &__toast {
        background-color: vars.$white;
        color: vars.$dark-grey;
      }
    }
  }
  &[data-theme="light"] {
    background-color: vars.$white;
    color: vars.$font-color;

    .sh {
      &__toggler {
        background-color: vars.$white;
        border-color: vars.$grey;
        &:hover {
          border-color: vars.$dark-grey;
        }
      }
      &__github-btn {
        color: vars.$black;
        border-color: vars.$light-grey;
        background-color: rgb(232, 230, 230);
        &::before {
          background-image: url("../images/github-mark.svg");
        }
      }
      &__toast {
        background-color: vars.$dark-grey;
        color: vars.$light-grey;
      }
    }
  }

  @media (prefers-color-scheme: dark) {
    background-color: vars.$darkest-grey;
    color: vars.$white;
  }
  @media (prefers-color-scheme: light) {
    background-color: vars.$white;
    color: vars.$font-color;
  }
}

.sh {
  position: relative;
  overflow: hidden;
  width: 100vw;
  min-height: 100vh;
  height: 100%;
}
